{% extends '::base.html.twig' %}

{% block javascript %}
<script type="text/javascript">
	
	function validate() {
			
		var newPassword = document.getElementById( "form_newPassword" );
		var confirmNewPassword = document.getElementById( "form_confirmNewPassword" );
		var newPasswordError = document.getElementById( "newPasswordInfo" );
			
		//validate new passwords to ensure they match	
		if( newPassword.value != confirmNewPassword.value ) {
			newPasswordError.innerHTML = "<ul><li>New passwords do not match!</li></ul>";
			return false;
		}
		
		//validate min and max lengths for new passwords
		if( newPassword.value.length < 4 ) {
			newPasswordError.innerHTML = "<ul><li>New password must be atleast 4 characters!</li></ul>";
			return false;
		}
		if( newPassword.value.length > 100 ) {
			newPasswordError.innerHTML = "<ul><li>New password cannot be more than 100 characters!</li></ul>";
			return false;
		}
		
		return true;
	}
</script>

{% endblock %}

{% block body %}
	{{ parent() }}
		<h1>Change Password</h1>
		<br />
		<form action="{{ path('_password') }}" method="post" {{ form_enctype(form) }} onsubmit="return validate();">
			<table class="PasswordTable">
				<col width="25%">
				<col width="25%">
				<col width="50%">
				<tr>
					<td class="registerText"> Old Password:</td>
					<td>{{ form_widget( form.oldPassword ) }}</td>
					<td class="info" id="passwordInfo"></td>
				</tr>
				<tr>
					<td class="registerText"> New Password:</td>
					<td>{{ form_widget( form.newPassword ) }}</td>
					<td class="info" id="newPasswordInfo"></td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2"><div style="color: #A6A6A6; font-size: 7px; text-align: left">4-character minimum; case sensitive</div></td>
				</tr>
				<tr>
					<td class="registerText"> Confirm Password:</td>
					<td>{{ form_widget( form.confirmNewPassword ) }}</td>
					<td></td>
				</tr>
			</table>				
			<div style="text-align: center">
				<input id="updateButton" class="grey-button" type="submit" value="Update" style="padding: 3px" />
			</div>
			{{ form_rest(form) }}
		</form>
{% endblock %}		
